<template>
    <div class="view-user-info">
        <el-form ref="user-info-form" :model="formData" :rules="rules" label-width="90px" label-suffix="：">
            <el-form-item label="登录名">
                <div class="input-text">{{ formData.username }}</div>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="formData.nickname" placeholder="请输入昵称" maxlength="16" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-select v-model="formData.gender" placeholder="请选择性别" style="width: 100%;" clearable>
                    <el-option
                        v-for="(item, index) in genderList"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="生日" prop="birth">
                <el-date-picker type="date" placeholder="选择日期" v-model="formData.birth" value-format="yyyy-MM-dd" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="formData.phone" :maxlength="11" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="30" />
            </el-form-item>
            <el-form-item label="个性签名" prop="motto">
                <el-input v-model="formData.motto" placeholder="请输入个性签名" type="textarea" maxlength="50" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSubmit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'view-user-info',
        data () {
            return {
                genderList: [
                    { label: '男', value: '1' },
                    { label: '女', value: '2' }
                ],
                formData: {
                    username: '',
                    nickname: '',
                    gender: '',
                    birth: '',
                    phone: ''
                },
                rules: {
                    nickname: { required: true, pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_]{1,16}$/, trigger: 'blur', message: '1-16位中英文数字下划线' },
                    phone: { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                }
            }
        },
        created () {
            const userInfo = this.$store.state.user.info
            this.formData = { ...userInfo }
        },
        methods: {
            handleSubmit () {
                this.$refs['user-info-form'].validate(valid => {
                    if (!valid) { return false }
                    this.$store.commit('SET_IS_LOADING', { isLoading: true })
                    this.$axios({
                        url: '/user/info',
                        method: 'post',
                        data: this.formData
                    }).then(res => {
                        this.$store.commit('SET_IS_LOADING', { isLoading: false })
                        if (res.data.code === 's00') {
                            this.$message.success(res.data.msg)
                        } else {
                            this.$message.warning(res.data.msg)
                        }
                    }).catch((err) => {
                        this.$store.commit('SET_IS_LOADING', { isLoading: false })
                        this.$message.warning(err)
                    })
                })
            }
        }
    }
</script>

<style lang="scss">
.el-form {
    width: 460px;
}
</style>
